<template>
	<view class="base-dropdown">
		<view class="base-dropdown__title" @click="handleShow">
			<view class="base-dropdown__title--text">{{ title }}</view>
			<IconFont :name="isShow ? 'rect-up' : 'rect-down'" size="12"></IconFont>
		</view>
		<view class="base-dropdown__content" v-if="isShow">
			<view
				class="base-dropdown__content--item"
				:class="{ active: props.modelValue === item.value }"
				v-for="item in props.items"
				:key="item.value"
				@click="handleSelect(item)"
			>
				<text>{{ item.label }}</text>
				<IconFont name="check" size="16" color="#22B27C" v-if="props.modelValue === item.value"></IconFont>
			</view>
		</view>
		<view class="base-dropdown__mask" v-if="isShow"></view>
	</view>
</template>

<script setup>
const emit = defineEmits(['update:modelValue', 'change']);
const props = defineProps({
	modelValue: {
		type: String,
		default: ''
	},
	placeholder: {
		type: String,
		default: '请选择'
	},
	items: {
		type: Array,
		default: () => []
	},
	textActiveColor: {
		type: String,
		default: '#4571FF'
	}
});

// 生成唯一标识
const isShow = ref(false);
const title = computed(() => {
	return props.modelValue ? props.items.find(item => item.value === props.modelValue)?.label : props.placeholder;
});

const handleSelect = item => {
	isShow.value = false;
	emit('update:modelValue', item.value);
	emit('change', item.value);
};

const handleShow = () => {
	isShow.value = !isShow.value;
};
</script>

<style lang="scss">
.base-dropdown {
	position: relative;
	font-size: 14px;
	color: #666;
	width: 100%;
	height: 100%;

	&__title {
		position: absolute;
		width: 100%;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		top: 0;
		left: 0;
		z-index: 1001;
		padding: 0 12px;
		box-sizing: border-box;

		&--text {
			margin-right: 4px;
		}
	}

	&__content {
		position: fixed;
		top: 44px;
		left: 0;
		width: 100%;
		z-index: 1000;
		background-color: #fff;

		&--item {
			height: 42px;
			line-height: 42px;
			padding: 0 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&.active {
				color: #4571ff;
				background: #F8F8F9;
			}
		}
	}

	&__mask {
		position: fixed;
		top: 44px;
		left: 0;
		width: 100%;
		height: calc(100vh - 44px);
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.5);
	}
}
</style>
